<template>
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="linkData"
      filterable
      :titles="['未关联', '已关联']"
      :format="{
                  noChecked: '${total}',
                  hasChecked: '${checked}/${total}',
                }"
      @change="handleChange"
      :data="totalData"
      :props="{
                  key: 'code',
                  label: 'name',
                }"
      filter-placeholder="请输入服务名称"
    >
      <span slot-scope="{ option }" :title="option.name">
        {{
        option.name
        }}
      </span>
    </el-transfer>
</template>

<script>
export default {
  props:{
    totalData: {
      type: Array,
      default(){
        return []
      }
    },
  },
    data() {
        return {
            totalData: [],
            linkData: [],
        }
    },
    methods: {
        // 关联地图服务
        handleChange(value, direction, movedKeys) {
          //子组件告诉父组件改变值
          this.$emit("handleChange", data);
        },
    },
}
</script>


<style scoped lang="less">
</style>
